<template>
  <div class="page">
    <m-header :title="WithdrawalRecord.withdrawal_record" :canback="Boolean(1)"></m-header>
    <div class="body">
      <ul class="title-wrap">
        <li class="title-name">{{WithdrawalRecord.waller_address}}</li>
        <li class="title-name">{{WithdrawalRecord.amount}}</li>
        <li class="title-name">{{WithdrawalRecord.status}}</li>
        <li class="title-name">{{WithdrawalRecord.date}}</li>
      </ul>
      <ul v-lazy-load="lazyLoad" :style="'height:'+(screenHeight-100)+'px;overflow:auto;'">
        <li v-for="item in records" :key="item.id" class="list-wrap">
          <span class="list-num">{{item.addr}}</span>
          <span class="list-num">{{item.amount}}</span>
          <span class="list-num">{{item.status_name}}</span>
          <span class="list-num">{{item.createtime}}</span>
        </li>
        <li v-if="noMore" class="noMore">{{MyTeam.no_more}}~</li>
      </ul>
    </div>
  </div>
</template>
<script>
import { Owner } from "@/server/server.js";
import { mapGetters } from 'vuex';
export default {
  data() {
    return {
      records: [],
      page: 1,
      noMore: false,
      screenHeight: 667,
      WithdrawalRecord: {},
      MyTeam: {},
    };
  },
  computed: {
    ...mapGetters(["lang"])
  },
  created() {
    this.WithdrawalRecord = this.lang.WithdrawalRecord
    this.MyTeam = this.lang.MyTeam
    this.getWithdrawalRecord();
    this.screenHeight = window.screen.availHeight || window.screen.height;
  },
  methods: {
    getWithdrawalRecord() {
      Owner.getWithdrawalRecord({ page: this.page }).then(res => {
        if (res.code == 1) {
          this.records = this.records.concat(res.data.records);
          if (res.data.page > res.data.allPage) this.noMore = true;
        } else {
          mui.toast(res.msg);
          return false;
        }
      });
    },
    lazyLoad() {
      if (!this.noMore) {
        this.page = this.page + 1;
        this.getWithdrawalRecord();
      }
    }
  }
};
</script>
<style lang="less" scoped>
@import "~link-less";
.body {
  //   padding: 10px;
  background-color: white;
  .title-wrap {
    padding: 10px;
    .display-flex();
    justify-content: space-around;
    border-bottom: 1px solid #ccc;
    font-size: 34px;
    .title-name {
      padding: 10px;
      flex: 1;
      text-align: center;
    }
  }
  .list-wrap {
    .display-flex();
    justify-content: space-around;
    align-items: center;
    border-bottom: 1px solid #ccc;
    .list-num {
      padding: 10px;
      text-align: center;
      flex: 1;
      word-break: break-all;
    }
  }
  .noMore {
    padding: 10px;
    text-align: center;
    font-size: 30px;
    color: #999;
  }
}
</style>